<template>
  <view class="content">
    <view class="login-header">
      <view class="text">你好，</view>
      <view class="text">欢迎使用uni-admin-roc</view>
    </view>
    <view class="login-main u-p-40">
      <u-form ref="formRef" :model="form" :rules="rules" label-width="60px">
        <u-form-item label="账号" prop="account">
          <u-input v-model="form.account" placeholder="请输入账号"></u-input>
        </u-form-item>
        <u-form-item label="密码" prop="password">
          <u-input v-model="form.password" placeholder="请输入密码" type="password"></u-input>
        </u-form-item>
        <u-form-item label="验证码" prop="code" v-if="isCode">
          <u-input v-model="form.code" placeholder="请输入验证码" maxlength="6">
            <template slot="suffix">
              <image style="width: 70px; height: 24px" :src="codeUrl" @click="getCode"></image>
            </template>
          </u-input>
        </u-form-item>
      </u-form>
      <u-button type="primary" :customStyle="{ borderRadius: '20px', marginTop: '20px' }" @click="login">
        登 录
      </u-button>
    </view>
  </view>
</template>

<script>
import { authToHome } from '@/utils/roc.js'
import { getCodeImg } from '@/mock/login.js'

export default {
  data() {
    return {
      // 是否启用验证码
      isCode: true,
      form: {
        account: '',
        password: '',
        code: '',
        uuid: '',
      },
      codeUrl: '',
      rules: {
        account: [{ required: true, message: '账号不能为空', trigger: ['change', 'blur'] }],
        password: [{ required: true, message: '密码不能为空', trigger: ['change', 'blur'] }],
        code: [{ required: true, message: '验证码不能为空', trigger: ['change', 'blur'] }],
      },
    }
  },
  onLoad() {
    if (this.isCode) this.getCode()
  },
  onShow() {
    authToHome()
  },
  onReady() {
    this.$refs['formRef'].setRules(this.rules)
  },
  methods: {
    /**
     * 登录操作
     */
    login() {
      this.$refs['formRef']
        .validate()
        .then(() => {
          if (!this.isCode) {
            this.$delete(this.form, 'code')
            this.$delete(this.form, 'uuid')
          }
          this.$store
            .dispatch('user/login', this.form)
            .then(() => {
              this.$store.dispatch('user/getInfo')
              uni.switchTab({
                url: '/pages/home/home',
              })
            })
            .catch(() => {
              if (this.isCode) this.getCode()
            })
        })
        .catch(errors => {
          console.error(errors)
        })
    },
    /**
     * 获取验证码
     */
    getCode() {
      getCodeImg().then(res => {
        this.codeUrl = `data:image/gif;base64,${res.img}`
        this.form.uuid = res.uuid
      })
    },
  },
}
</script>

<style lang="scss" scoped>
.content {
  .login-header {
    background: url(@/static/img/login-bg.png) no-repeat;
    background-size: 100% 100%;
    height: 220px;
    color: #fff;
    font-size: 24px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-top: var(--status-bar-height);
    padding-left: 40px;
    .text {
      position: relative;
      left: 0;
      top: -16px;
    }
  }
  .login-main {
    box-sizing: border-box;
    position: relative;
    top: -30px;
    left: 0;
    width: 100%;
    border-radius: 20px;
    background-color: #fff;
  }
}
</style>
